import React, { useEffect, useState, useRef } from 'react'
import { Button, Card, Input, Spin, Modal, message, Tree, Tooltip } from 'antd'
import DepartmentInfo from './components/info'
import styles from './style.module.less'
import './style.less'
import { FormOutlined, DeleteOutlined, ExclamationCircleFilled } from '@ant-design/icons'
import { remoteList, deleteInfo } from '@/api/system/dept'
import { IQueryList } from '@/api/index.type'
import UserInfo from '../user/index'
import { IDepartment } from './types'
const { confirm } = Modal;
const { Search } = Input;

const Department = (props: any) => {
    let fieldNames = {
        children: 'children',
        title: 'title',
        key: 'deptId'
    }
    const [loading, setLoading] = useState<boolean>(false);
    const [treeData, setTreeData] = useState<IDepartment[]>([]);
    const [currentItem, setCurrentItem] = useState<IDepartment>();
    const [eidtInfo, setEditInfo] = useState<IDepartment | object>({});
    const [showModal, setShowModal] = useState<boolean>(false);
    //初始化
    useEffect(() => {
        search();
    }, [])
    //搜索
    const search = async (): Promise<void> => {
        setLoading(true)
        try {
            let res = await remoteList({});
            let { data = [] } = res;
            transferTitle(data);
            setTreeData(data)
        } finally {
            setLoading(false)
        }
    };
    //转换tree title
    const transferTitle = (data: IDepartment[]) => {
        data.map((item) => {
            item.title = (
                <div className={styles.deptItem}>
                    <span className={styles.deptName}>
                        <Tooltip placement="top" title={item.deptName}>
                        {item.deptName}
                        </Tooltip>
                    </span>
                    <Button type="link" size={'small'} onClick={()=>showInfo(item)}>
                        <FormOutlined className='dept_edit' />
                    </Button>
                    <DeleteOutlined className='dept_del' onClick={()=>remove(item)}/>
                </div>)
            if (item.children?.length) {
                transferTitle(item.children);
            }
        })
    }
    //选择部门节点触发
    const selectTreeItem = (selectedKeys: any) => {
        setCurrentItem(selectedKeys[0])
    }
    //编辑信息
    const showInfo = (info: IDepartment | object = {}) => {
        setEditInfo(info)
        setShowModal(true)
    }
    //删除
    const remove = (info: IDepartment) => {
        let { deptName, deptId } = info;
        confirm({
            title: '操作提示',
            icon: <ExclamationCircleFilled />,
            content: `确定要删除 ${deptName} 部门吗?`,
            cancelText: '取消',
            okText: '确定',
            onOk: async () => {
                try {
                    await deleteInfo({ ids: [deptId] });
                    message.success('操作成功')
                    search()
                } catch (err) {
                    message.error('操作失败')
                }
            }
        });
    }

    return (
        <div className='main_body flex-row'>
            <div className={styles.side}>
                <Card title="组织列表" extra={<Button type='primary' onClick={() => showInfo({})}>添加</Button>} style={{ width: '100%', height: '100%' }}>
                    <Spin spinning={loading}>
                        <div className={styles.role_box}>
                            <Tree
                                defaultExpandAll={false}
                                fieldNames={fieldNames}
                                treeData={treeData}
                                defaultExpandParent
                                onSelect={selectTreeItem}
                            />
                        </div>
                    </Spin>
                </Card>
            </div>
            <div className={styles.main}>
                <Card title="员工列表" style={{ width: '100%', height: '100%' }}>
                    <UserInfo deptId={currentItem} isShowSearch={false} />
                </Card>
            </div>
            {
                showModal && <DepartmentInfo info={eidtInfo} list={treeData} submit={() => { setShowModal(false); search(); }} close={() => setShowModal(false)} />
            }
        </div>
    )
}
export default Department
